// import Vue from 'vue'

// 这种有问题:
// 1.这种方式直接限制死了用户的使用方式  全局/局部
//   => 用户想全局  想局部
// 2.这种方式也是非常浪费的
//   => 自定义指令非常多, 并不是每个指令都要用, 都要注册

// 封装全局自定义指令
// <div v-imgerror>

export const imgerror = {
  inserted(el, binding) {
    // 触发时机: 指令所在的dom插入页面时执行
    // el => 指令所在的元素
    // binding => 指令的信息对象, binding.value => 指令的值
    console.log('我现在进入页面了', el, binding.value)
    // 不管图片坏没坏, 直接替换图片
    // el.src = binding.value

    // 需求: 图片没法展示???  => 触发img的error事件
    el.onerror = function() {
      // 图片没法展示
      el.src = binding.value
    }
  }
}

// 封装v-color的最重要的那个指令对象

// 按需导出
export const color = {
  inserted(el, { value }) {
    el.style.color = value
  }
}
